<template>
    <div class="page-content">
      <div class="banner">
        <div class="banner-center-box">
          <div class="banner-left-box">
            <h2><span>加</span>入裸机云联盟</h2>
            <p>成为联盟经销商，代理销售全球数据中心</p>
            <p>赠送550美金现金，免费赠送业务管理系统，免费技术支持！</p>
            <span class="banner-btn">立即购买</span>
          </div>
          <div class="banner-right-box"></div>
        </div>
      </div>

      <div class="content-items-box">
        <div class="box-title">
          <h2>连接数据中心与分销商</h2>
          <div class="e-title">Data center and distributors</div>
        </div>
        <div class="items-detail-box">
          <div class="item-box">
            <div class="icon-box">icon</div>
            <div class="item-tit">靠谱数据中心资源</div>
            <div class="item-detail">所有机房均为一手资源方，由联盟 为经销商精心甄选供应商</div>
            <a class="more-btn">了解更多</a>
          </div>

          <div class="item-box active">
            <div class="icon-box">icon</div>
            <div class="item-tit">一致的用户体验</div>
            <div class="item-detail">
              联盟为所有数据中心提供硬件、软件到
              网络的一站式解决方案，确保用户体验
            </div>
            <a class="more-btn">了解更多</a>
          </div>

          <div class="item-box">
            <div class="icon-box">icon</div>
            <div class="item-tit">联盟7*24小时不间断为双方服务</div>
            <div class="item-detail">
              联盟为数据中心提供7*24小时提供
              巡检服务，并且为经销商的需求免费
              提供软件开发支持
            </div>
            <a class="more-btn">了解更多</a>
          </div>

        </div>
      </div>

      <div class="content-items-box global-distribution">
        <div class="box-title">
          <h2>全球布局</h2>
          <div class="e-title">Global distribution</div>
        </div>
        <div class="items-detail-box">
          <div class="round-box big">
            <div class="round-box medium">
              <div class="round-box"></div>
            </div>

            <div class="roud-item-box">全球统一标准布局，同标准的硬件产品系列</div>
            <div class="roud-item-box roud-item2">Tier3或以上级别数据中心为客户保驾护航</div>
            <div class="roud-item-box roud-item3">覆盖主流区域，帮助经销商客户业务通达全球</div>
            <div class="roud-item-box roud-item4">全球更多数据中心正在被陆续接入</div>

            <div class="roud-small"></div>
            <div class="roud-small small2"></div>
            <div class="roud-small small3"></div>
            <div class="roud-small small4"></div>
          </div>

          <div class="area-round-box">亚太</div>
          <div class="area-round-box area2">北美</div>
          <div class="area-round-box area3">欧洲</div>
        </div>
      </div>

      <div class="content-items-box my-product">
        <div class="product-center">
          <div class="box-title">
            <h2>我们的产品</h2>
            <div class="e-title">Our product</div>
          </div>
          <div class="items-detail-box">
            <div class="product-items">
              <div class="items-left">
                <img class="product-img" src="@/assets/index/product1.png" alt="">
              </div>
              <div class="items-right">
                <div class="product-title">Hardware</div>
                <div class="s-title"><span>硬</span>件</div>
                <div class="porduct-detail">
                  BMSunion的所有硬件产品均来源于自有品牌MicroDragon, MicroDragon提供业界超高密度服务器、存储服务器及交换机 产品，
                  所有硬件提供API为平台软件系统服务。
                </div>
                <div class="more-btn">了解更多</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  export default {
    name: 'BmsIndex'
  }
</script>

<style type="text/less" lang="less" scoped>
.banner{
  background-image: url("../../assets/index/banner-bg.png");
  height: 742px;
  width: 100%;
  background-size: cover;
  .banner-center-box{
    width: 1380px;
    margin: 0 auto;
    padding-top: 230px;
    color: #ffffff;
    .banner-left-box{
      h2{
        font-size: 45px;
        color: #ffffff;
        margin-bottom: 50px;
        span{
          padding-bottom: 9px;
          border-bottom: 3px solid #26e6b3;
          border-radius: 1.5px;
        }
      }
      p{
        font-size: 17px;
        margin-bottom: 5px;
      }
      .banner-btn{
        display: inline-block;
        cursor: pointer;
        margin-top: 20px;
        color: #ffffff;
        font-size: 14px;
        padding: 8px 15px;
        border-radius: 5px;
        background:linear-gradient(0deg,rgba(19,195,140,1) 1%,rgba(51,255,204,1) 100%);
      }
    }
  }
}

.content-items-box{
  position: relative;
  width: 1380px;
  margin: 0 auto;
  padding: 110px 40px;
  .box-title{
    text-align: center;
    h2{
      font-size: 28px;
      color: #000;
      font-weight: 400;
    }
    .e-title{
      font-size: 12px;
      letter-spacing: 7px;
      color: #28DBB1;
    }
  }

  .items-detail-box{
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    position: relative;
    .area-round-box{
      position: absolute;
      top: 255px;
      left: 100px;
      width:132px;
      height:132px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #ffffff;
      background:linear-gradient(180deg,rgba(40,125,246,1) 0%,rgba(49,217,203,1) 100%);
      border-radius:50%;
      &.area2{
         top: 140px;
         right: 100px;
         left: auto;
       }
      &.area3{
         top: 450px;
         right: 140px;
         left: auto;
       }
    }
    .item-box{
      width: 353px;
      background-color: #F9FAFE;
      border-radius: 10px;
      padding: 60px 40px;
      cursor: pointer;
      &.active{
        background-color: #3677D3;
        color: #ffffff;
        .item-tit, .item-detail{
          color: #ffffff;
        }
       }
      .item-tit{
        font-size: 18px;
        color: #333333;
        margin-bottom: 25px;
      }
      .item-detail{
        font-size: 14px;
        color: #999999;
        width: 80%;
        line-height: 22px;
        margin-bottom: 45px;
      }
      .more-btn{
        color: #28DBB1;
        font-size: 14px;
      }
    }
  }
}

.my-product{
  width: 100%;
  background:linear-gradient(to bottom,#eef5ff 0%,#f4f9ff 50%,#fbfcff 85%,#ffffff 85%);
  .product-center{
    width: 1380px;
    margin: 0 auto;
    .product-items{
      display: flex;
    }
  }
}

.global-distribution{
  .items-detail-box{
    .round-box{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 235px;
      height: 235px;
      border-radius: 50%;
      border:2px dashed rgba(102,102,102,1);
      &.medium{
       display: flex;
       align-items: center;
       justify-content: center;
        width: 420px;
        height: 420px;
        border-style: solid;
       }
      &.big{
        position: relative;
        margin: 0 auto;
        width: 590px;
        height: 590px;
        border-style: dotted;
        .roud-item-box{
          position: absolute;
          top: 39px;
          left: 121px;
          width: 309px;
          height: 100px;
          border-radius: 15px;
          background:linear-gradient(90deg,#277AF7 0%,#31DEC9 100%);
          font-size: 16px;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 30px;
          &.roud-item2{
             top: 176px;
             left: 235px;
           }
          &.roud-item3{
             top: 315px;
             left: 40px;
           }
          &.roud-item4{
             top: 450px;
             left: 155px;
           }
        }
       }
      .roud-small{
        position: absolute;
        top: 81px;
        left: 65px;
        width: 22px;
        height: 22px;
        background:linear-gradient(90deg,rgba(37,103,255,1) 0%,rgba(50,232,197,1) 100%);
        border-radius:50%;
        &.small2{
           top: 352px;
           left: -4px;
         }
        &.small3{
          top: 220px;
          right: -5px;
          left: auto;
        }
        &.small4{
           top: 485px;
           left: auto;
           right: 71px;
         }
      }

    }
  }
}
</style>